/*
 * 修改素材
 * @Author: ljb
 * @Date: 2019-01-29 17:51:20
 * @Last Modified by: ljb
 * @Last Modified time: 2019-01-29 18:23:42
 */
<style lang="less" rel="stylesheet/less" type="text/less" scoped>

    .ivu-form-item-content {

    }

</style>
<template>
	<div class="v-customer-product-material-edit">
		<Form
			ref="edit_formValidate"
			:model="formValidate"
			:rules="ruleValidate"
			:label-width="labelWidth(100,140)">

			<Form-item
				:label="$t('tryon_material.category')"
				prop="category_id">
				<Select
					v-model="formValidate.category_id"
					clearable>
					<Option
						v-for="category in categories"
						:value="category.id + ''"
						:key="category.id">{{ category.name }}</Option>
				</Select>
			</Form-item>

			<Form-item
				:label="$t('tryon_material.code')"
				prop="code">
				<i-input
					v-model="formValidate.code"
					:placeholder="$t('common.placeholder',{field: $t('tryon_material.code')})"
					type="text"/>
			</Form-item>

			<Form-item
				v-if="!isGlass"
				:label="$t('tryon_material.xml')"
				prop="model_xml">
				<Upload
					:before-upload="file=>fileChange(file,'model_xml','file_info_xml')"
					:on-remove="file=>fileChange(file,'model_xml','file_info_xml')"
					:multiple="false"
					action="//fake_upload_url/">
					<Button
						type="ghost"
						icon="ios-cloud-upload-outline">{{ file_info_xml.name ? $t('tryon_material.change_material') : $t('tryon_material.new_material') }}</Button>
					<div
						v-if="file_info_xml.name"
						slot="tip"
						class="license-tip">{{ file_info_xml.name }}</div>
						<!-- <div class="license-tip" slot="tip" v-else>图片规格为320 x 134的jpg、jpeg或png，大小不超1.5M</div> -->
				</Upload>
			</Form-item>

			<Form-item
				v-if="isGlass"
				:label="$t('tryon_material.android')"
				prop="model_glass_android">
				<Upload
					:before-upload="file=>fileChange(file,'model_glass_android','file_info_android')"
					:on-remove="file=>fileChange(file,'model_glass_android','file_info_android')"
					:multiple="false"
					action="//fake_upload_url/">
					<Button
						type="ghost"
						icon="ios-cloud-upload-outline">{{ file_info_android.name ? $t('tryon_material.change_material') : $t('tryon_material.new_material') }}</Button>
					<div
						v-if="file_info_android.name"
						slot="tip"
						class="license-tip">{{ file_info_android.name }}</div>
						<!-- <div class="license-tip" slot="tip" v-else>图片规格为320 x 134的jpg、jpeg或png，大小不超1.5M</div> -->
				</Upload>
			</Form-item>

			<Form-item
				v-if="isGlass"
				:label="$t('tryon_material.ios')"
				prop="model_glass_ios">
				<Upload
					:before-upload="file=>fileChange(file,'model_glass_ios','file_info_ios')"
					:on-remove="file=>fileChange(file,'model_glass_ios','file_info_ios')"
					:multiple="false"
					action="//fake_upload_url/">
					<Button
						type="ghost"
						icon="ios-cloud-upload-outline">{{ file_info_ios.name ? $t('tryon_material.change_material') : $t('tryon_material.new_material') }}</Button>
					<div
						v-if="file_info_ios.name"
						slot="tip"
						class="license-tip">{{ file_info_ios.name }}</div>
						<!-- <div class="license-tip" slot="tip" v-else>图片规格为320 x 134的jpg、jpeg或png，大小不超1.5M</div> -->
				</Upload>
			</Form-item>

			<Form-item>
				<Button
					type="primary"
					@click="handleSubmit('edit_formValidate')">{{ $t('common.submit') }}</Button>
				<Button
					type="ghost"
					style="margin-left: 8px"
					@click="handleReset('edit_formValidate')">{{ $t('common.reset') }}</Button>
			</Form-item>

		</Form>
	</div>
</template>

<script>

import labelWidthMixin from 'src/views/mixins/labelWidthMixin';

const GLASS_ID = 10; // glass类型的分类id

export default {
	name: 'MaterialEdit',
	mixins: [labelWidthMixin],
	props: {
		categories: {
			type: Array,
			default() {
				return [];
			},
		},
		assetDetail: {
			type: Object,
			default() {
				return {};
			},
		},
	},
	data() {
		return {

			formValidate: {

				category_id: '',

				code: '',

				model_xml: '',

				model_glass_android: '',

				model_glass_ios: '',
			}, // 更新素材时的表单

			ruleValidate: {
				category_id: [
					{
						// required: true,
						message: this.$t('validate.required', { field: this.$t('tryon_material.category') }),
						trigger: 'blur,change',
					},
				],
				code: [
					{
						// required: true,
						message: this.$t('validate.required', { field: this.$t('tryon_material.code') }),
						trigger: 'blur,change',
					},
				],
				model_xml: [
					// {
					// 	required: true,
					// 	type: 'object',
					// 	message: this.$t('validate.required', { field: this.$t('tryon_material.xml') }),
					// 	trigger: 'blur,change',
					// },
				],
				model_glass_android: [
					// {
					// 	required: true,
					// 	type: 'object',
					// 	message: this.$t('validate.required', { field: this.$t('tryon_material.android') }),
					// 	trigger: 'blur,change',
					// },
				],
				model_glass_ios: [
					// {
					// 	required: true,
					// 	type: 'object',
					// 	message: this.$t('validate.required', { field: this.$t('tryon_material.ios') }),
					// 	trigger: 'blur,change',
					// },
				],
			},

			// 上传的xml模型信息
			file_info_xml: {
				name: '',
			},

			// 上传的安卓模型信息
			file_info_android: {
				name: '',
			},

			// 上传的ios模型信息
			file_info_ios: {
				name: '',
			},

		};
	},
	computed: {
		// 是否是glass类型
		isGlass() {
			const { category_id } = this.formValidate;

			return parseInt(category_id, 10) === GLASS_ID;
		},
	},
	// watch: {
	// 	'formValidate.category_id': function categoryChange(value, old_value) {
	// 		if (parseInt(value, 10) === GLASS_ID) {
	// 			this.file_info_android.name = '';
	// 			this.file_info_ios.name = '';
	// 			this.formValidate.model_glass_android = this.assetDetail.model_glass_android || '';
	// 			this.formValidate.model_glass_ios = this.assetDetail.model_glass_ios || '';

	// 			this.formValidate.model_xml = {};
	// 			this.$refs.edit_formValidate.validateField('model_xml');	// 重置报错信息
	// 		} else if (parseInt(old_value, 10) === GLASS_ID) {
	// 			this.file_info_xml.name = '';
	// 			this.formValidate.model_xml = '';

	// 			this.formValidate.model_glass_android = {};
	// 			this.formValidate.model_glass_ios = {};
	// 			this.$refs.edit_formValidate.validateField('model_glass_android');
	// 			this.$refs.edit_formValidate.validateField('model_glass_ios');
	// 		}
	// 	},
	// },
	mounted() {
		this.initAsset();
	},
	methods: {
		/**
         * 初始化素材赋值
         */
		initAsset() {
			if (Object.keys(this.assetDetail).length > 0) {
				this.formValidate.category_id = String(this.assetDetail.category_id);

				this.formValidate.code = this.assetDetail.code;

				if (parseInt(this.assetDetail.category_id, 10) === GLASS_ID) {
					this.formValidate.model_glass_android = this.assetDetail.model_glass_android;
					this.formValidate.model_glass_ios = this.assetDetail.model_glass_ios;

					this.file_info_android.name = this.assetDetail.model_glass_android;
					this.file_info_ios.name = this.assetDetail.model_glass_ios;
				} else {
					this.formValidate.model_xml = this.assetDetail.xml_key;

					this.file_info_xml.name = this.assetDetail.xml_key;
				}
			}
		},

		/**
         * file类型input改变
         * @param  {Object} file {选择的文件对象}
         * @return {Boolean} {false则会停止上传}
         */
		fileChange(file, param, info) {
			this[info].name = file.name;

			this.formValidate[param] = file;

			this.$refs.edit_formValidate.validateField(param);

			return false;
		},

		/**
         * 提交表单
         * @param  {string} name {表单的ref}
         * @return {undefined}
         */
		handleSubmit(name) {
			this.$refs[name].validate((valid) => {
				if (valid) {
					this.dataPost();
				} else {
					this.$Message.error(this.$t('common.exist_empty_field'));
				}
			});
		},

		/**
         * 重置表单
         * @param  {string} name {表单的ref}
         * @return {undefined}
         */
		handleReset(name) {
			this.$refs[name].resetFields();

			this.file_info_android.name = '';
			this.file_info_xml.name = '';
			this.file_info_ios.name = '';
		},

		/**
         * post数据
         * @return {undefined}
         */
		dataPost() {
			const form_data = this.formDataCreate();

			this.$emit('update', form_data);
		},

		/**
         * 手动拼接formdata数据
         * @return {Object}
         */
		formDataCreate() {
			const new_object = {
				_method: 'PUT',

				category_id: this.formValidate.category_id,

				code: this.formValidate.code,
			};

			if (this.isGlass) {
				new_object.model_glass_android = this.formValidate.model_glass_android;
				new_object.model_glass_ios = this.formValidate.model_glass_ios;
			} else {
				new_object.model_xml = this.formValidate.model_xml;
			}

			const form_data = new FormData();

			Object.keys(new_object).forEach((key) => {
				form_data.append(key, new_object[key]);
			});

			return form_data;
		},

	},
};
</script>
